<template>
	<div class="wrapper layout">
		<myhead activeIndex="/personHome"></myhead>
		<div class="center content" style="position: relative">
			<!-- 左侧菜单 -->
			<div class="nav f14 navs">
				<router-link to="/personHome" :class="{ cfff: route.path == '/personHome' }" class="center">
					<i class="iconfont f18">&#xe751;</i>
					<div class="">个人首页</div>
				</router-link>
				<router-link to="/personSubscribe" :class="{ cfff: route.path == '/personSubscribe' }" class="center">
					<i class="iconfont f18">&#xe630;</i>
					<div class="">我的订阅</div>
				</router-link>
				<router-link to="/personKnowledge" :class="{ cfff: route.path == '/personKnowledge' }" class="center">
					<i class="iconfont f18">&#xe813;</i>
					<div class="">我的知识</div>
				</router-link>
				<router-link to="/personCollect" :class="{ cfff: route.path == '/personCollect' }" class="center">
					<i class="iconfont f18">&#xe8b9;</i>
					<div class="">我的收藏</div>
				</router-link>
				<router-link to="/personSetUp" :class="{ cfff: route.path == '/personSetUp' }" class="center">
					<i class="iconfont f18">&#xe8b7;</i>
					<div class="">个人设置</div>
				</router-link>
				<router-link to="/personPassword" :class="{ cfff: route.path == '/personPassword' }" class="center">
					<i class="iconfont f18">&#xe604;</i>
					<div class="">密码设置</div>
				</router-link>
				<router-link to="/personJournal" :class="{ cfff: route.path == '/personJournal' }" class="center">
					<!-- <i class="iconfont f31">&#xe604;</i> -->
					<el-icon class="iconfont f22" style="margin-right: 12px">
						<Tickets />
					</el-icon>
					<div class="f15">日志记录</div>
				</router-link>
				<router-link to="/personDuplicate" :class="{ cfff: route.path == '/personDuplicate' }" class="center">
					<!-- <i class="iconfont f31">&#xe604;</i> -->
					<el-icon class="iconfont f22" style="margin-right: 12px">
						<Reading />
					</el-icon>
					<div class="f15">查重记录</div>
				</router-link>
			</div>
			<div class="nav-dis" @click="drawer = true">菜单</div>
			<el-drawer v-model="drawer" :with-header="false" size="60%">
				<div class="nav f14">
					<router-link to="/personHome" :class="{ cfff: route.path == '/personHome' }" class="center">
						<i class="iconfont f18">&#xe751;</i>
						<div class="f15">个人首页</div>
					</router-link>
					<router-link
						to="/personSubscribe"
						:class="{ cfff: route.path == '/personSubscribe' }"
						class="center"
					>
						<i class="iconfont f18">&#xe630;</i>
						<div class="">我的订阅</div>
					</router-link>
					<router-link
						to="/personKnowledge"
						:class="{ cfff: route.path == '/personKnowledge' }"
						class="center"
					>
						<i class="iconfont f18">&#xe813;</i>
						<div class="">我的知识</div>
					</router-link>
					<router-link to="/personCollect" :class="{ cfff: route.path == '/personCollect' }" class="center">
						<i class="iconfont f18">&#xe8b9;</i>
						<div class="">我的收藏</div>
					</router-link>
					<router-link to="/personSetUp" :class="{ cfff: route.path == '/personSetUp' }" class="center">
						<i class="iconfont f18">&#xe8b7;</i>
						<div class="">个人设置</div>
					</router-link>
					<router-link to="/personPassword" :class="{ cfff: route.path == '/personPassword' }" class="center">
						<i class="iconfont f18">&#xe604;</i>
						<div class="">密码设置</div>
					</router-link>
					<router-link to="/personJournal" :class="{ cfff: route.path == '/personJournal' }" class="center">
						<!-- <i class="iconfont f31">&#xe604;</i> -->
						<el-icon class="iconfont f22" style="margin-right: 12px">
							<Tickets />
						</el-icon>

						<div class="">日志记录</div>
					</router-link>
					<router-link
						to="/personDuplicate"
						:class="{ cfff: route.path == '/personDuplicate' }"
						class="center"
					>
						<!-- <i class="iconfont f31">&#xe604;</i> -->
						<el-icon class="iconfont f22" style="margin-right: 12px">
							<Reading />
						</el-icon>
						<div class="">查重记录</div>
					</router-link>
				</div>
			</el-drawer>
			<!-- 右侧主体 -->
			<div class="flex right center colum">
				<div class="tags bfff">
					<el-tag
						@close="close(index)"
						@click="router.push(tag.fullPath)"
						v-for="(tag, index) in tags"
						:key="tag.path"
						closable
						:type="tag.path == route.path ? '' : 'info'"
						class="top_tag hover"
					>
						{{ tag.name }}
					</el-tag>
					<!-- :closable="tag.path == route.path" -->
				</div>
				<div class="right-content flex">
					<router-view></router-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
import { Tickets, Reading } from "@element-plus/icons-vue"
import { useSettingStores } from "@/store/settings"
const settingStore = useSettingStores()
const route = useRoute()
const router = useRouter()
const tags = computed(() => settingStore.geRentags)
const isMobile = computed(() => settingStore.isMobile)
const pageTitle = ref("")
const drawer = ref(false)
// 关闭标签
const close = i => {
	let t = JSON.parse(JSON.stringify(tags.value))
	if (t.length != 1) {
		t.splice(i, 1)
		settingStore.setGeRenTags(t)
		router.push(tags.value[t.length - 1].path)
	}
}
watch(
	route,
	val => {
		let t = JSON.parse(JSON.stringify(tags.value))
		if (val.path.indexOf("person") != -1) {
			pageTitle.value = val.meta.name
			t.push({
				path: val.path,
				fullPath: val.fullPath,
				name: val.meta.name,
			})
			let obj = {}
			t = t.reduce((cur, next) => {
				obj[next.path] ? "" : (obj[next.path] = true && cur.push(next))
				return cur
			}, [])
			settingStore.setGeRenTags(t)
		}
	},
	{ deep: true, immediate: true }
)
</script>
<style lang="scss" scoped>
@import "/style/basis";
.layout {
	.right {
		background-color: #f8f8f8;
		height: 100%;
		overflow: hidden;

		.right-content {
			width: 100%;
			padding-bottom: 20px;
		}
		:deep(.tags .el-tag) {
			// 	color: #333333;
			// 	height: 28px;
			// 	background: #f5f4f8;
			// 	border-radius: 3px;
			margin-right: 10px;
			margin-top: 10px;
			height: 32px;
			font-size: 14px;
		}

		:deep(.tags .el-tag .el-tag__close) {
			background-color: initial !important;
			color: #2972fa !important;
		}

		:deep(.tags .el-tag--primary) {
			color: #2972fa;
			background: rgba(41, 113, 255, 0.07);
		}
		.tags {
			// height: 60px;
			width: 100%;
			overflow-x: scroll;
			padding: 0 20px;
			border-bottom: 2px solid #ebeef5;
			padding-bottom: 10px;
			background-color: #f8f8f8 !important;
		}
	}

	.iconfont {
		margin-right: 10px;
	}
	.nav-dis {
		width: 30px;
		padding: 10px;
		text-align: center;
		background-color: #2972fa;
		color: #fff;
		display: none;
		position: fixed;
		top: 50;
		left: 0;
		z-index: 999;
		border-radius: 3px;
		@include maxWidth(1024) {
			display: block;
		}
	}
	.nav {
		height: 100%;
		width: 200px;
		background: #222944;
		color: rgba(255, 255, 255, 0.6);
		background-color: #000;
		@include maxWidth(1024) {
			width: 100%;
			background: #fff;
			color: #000;
		}

		.cfff {
			background: #2971ff;

			&::after {
				content: "";
				width: 3px;
				height: 20px;
				background: #ffffff;
				border-radius: 0 6px 6px 0;
				left: 0;
				top: 20px;
				position: absolute;
			}
		}

		.center {
			height: 50px;
			position: relative;
			justify-content: flex-start;
			padding-left: 25px;
			transition: all 0.25s;
			&:hover {
				background: #2972fa;
				color: #fff;

				&::after {
					content: "";
					width: 3px;
					height: 20px;
					background: #ffffff;
					border-radius: 0 6px 6px 0;
					left: 0;
					top: 20px;
					position: absolute;
				}
			}
		}
	}
	.navs {
		@include maxWidth(1024) {
			display: none;
		}
	}
	.content {
		height: calc(100vh - 80px);
	}
}
</style>
